<!-- 顶部公共标题栏组件 -->
<template>
	<!-- #ifdef MP -->
	<view v-if="navigationStyle === 'custom'" class="nav-bar" :style="navBarStyle">
		<view :class="['nav-bar-content', {'nav-bar-shadow': shadow}]" :style="{backgroundColor:navBackgroundColor, borderBottom: 'thin solid ' + borderBottomColor, height: (statusBarHeight + titleBarHeight) + 'px'}">
			<view class="status-bar" :style="{height: statusBarHeight + 'px', backgroundColor: statusbarColor}"></view>
			<slot name="titleBar">
				<view class="title-bar" :style="titleBarStyle">
					<view v-if="leftButtons.length > 0" class="left-buttons" :style="leftButtonsStyle">
						<view v-if="leftButtons.length == 1" class="left-button" :style="textStyle === 'white' ? leftSingleButtonLightStyle:leftSingleButtonDarkStyle">
							<view class="menu-button" @click="onMenuButtonTap(0, $event)">
								<image class="menu-icon" :src="textStyle === 'white' ? ('../../static/images/' + leftButtons[0].lightIconName + '.png'):('../../static/images/' + leftButtons[0].darkIconName + '.png')" mode="aspectFit"></image>
							</view>
						</view>
						<view v-if="leftButtons.length == 2" class="left-button" :style="textStyle === 'white' ? leftDoubleButtonLightStyle:leftDoubleButtonDarkStyle">
							<view class="menu-button" @click="onMenuButtonTap(0, $event)">
								<image class="menu-icon" :src="textStyle === 'white' ? ('../../static/images/' + leftButtons[0].lightIconName + '.png'):('../../static/images/' + leftButtons[0].darkIconName + '.png')" mode="aspectFit"></image>
							</view>
							<view class="line" :style="{borderRight: 'thin solid ' + (textStyle == 'white' ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)')}"></view>
							<view class="menu-button" @click="onMenuButtonTap(1, $event)">
								<image class="menu-icon" :src="textStyle === 'white' ? ('../../static/images/' + leftButtons[1].lightIconName + '.png'):('../../static/images/' + leftButtons[1].darkIconName + '.png')" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="page-title" :style="titleAlign === 'center' ? centerTitleStyle:leftTitleStyle">
						<slot name="title">
							<text class="title-text clamp1">{{title}}</text>
						</slot>
					</view>
				</view>
			</slot>
		</view>
		
		<view class="nav-place-holder" v-if="!float">
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<view :style="titleBarStyle"></view>
		</view>
	</view>
	<!--  #endif -->
	<!-- #ifdef WEB || APP-PLUS -->
	<view v-if="navigationStyle === 'custom'" class="nav-bar" :style="navBarStyle">
		<view :class="['nav-bar-content', {'nav-bar-shadow': shadow}]" :style="{backgroundColor:navBackgroundColor, borderBottom: 'thin solid ' + borderBottomColor, height: (statusBarHeight + titleBarHeight) + 'px'}">
			<view class="status-bar" :style="{height: statusBarHeight + 'px', backgroundColor: statusbarColor}"></view>
			<slot name="titleBar">
				<view class="title-bar" :style="titleBarStyle">
					<view v-if="leftButtons.length > 0" class="left-buttons" :style="leftButtonsStyle">
						<view class="left-button h5" :style="textStyle === 'white' ? leftSingleButtonLightStyle:leftSingleButtonDarkStyle">
							<view class="menu-button" @click="onMenuButtonTap(0, $event)">
								<image class="menu-icon" :src="textStyle === 'white' ? ('../../static/images/' + leftButtons[0].lightIconName + '.png'):('../../static/images/' + leftButtons[0].darkIconName + '.png')" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="page-title" :style="titleAlign === 'center' ? centerTitleStyle:leftTitleStyle">
						<slot name="title">
							<text class="title-text clamp1">{{title}}</text>
						</slot>
					</view>
				</view>
			</slot>
		</view>
		
		<view class="nav-place-holder" v-if="!float">
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<view :style="titleBarStyle"></view>
		</view>
	</view>
	<!-- #endif -->
</template>

<script>
	import { navigationBarOptions } from '../../global/global'
	export default {
		name: "custom-nav-bar",
		props: {
			title: {
				type: String,
				default: navigationBarOptions && navigationBarOptions.navigationBarTitle ? navigationBarOptions.navigationBarTitle:""
			},
			titleAlign: {
				type: String,
				default: navigationBarOptions && navigationBarOptions.navigationBarTitleAlign ? navigationBarOptions.navigationBarTitleAlign:"left",
				validator: (val) => {
					if (val === "center" || val === "left") {
						return true
					} else {
						throw new Error("custom-nav-bar 组件的 titleAlign 属性的值只能取 'left' 或者 'center'。")
					}
				}
			},
			textStyle: {
				type: String,
				default: navigationBarOptions && navigationBarOptions.navigationBarTextStyle ? navigationBarOptions.navigationBarTextStyle:"black",
				validator: (val) => {
					if(val === "black" || val === "white") {
						uni.setNavigationBarColor({
							frontColor: val === "black" ? "#000000":"#ffffff",
							backgroundColor: "transparent"
						})
						return true
					} else {
						throw new Error("custom-nav-bar 组件的 navigationBarTextStyle 属性的值只能取 'black' 或者 'white'。")
					}
				}
			},
			leftButtons: {
				type: Array,
				default: navigationBarOptions && navigationBarOptions.leftButtons ? navigationBarOptions.leftButtons:[],
				validator: (val) => {
					if(!val) {
						val = []
					}
					if(val.length > 2) {
						throw new Error("custom-nav-bar 组件的 leftButton数量不能超过两个。")
					}
					return true
				}
			},
			statusbarColor: {
				type: String,
				default: navigationBarOptions && navigationBarOptions.statusbarColor ? navigationBarOptions.statusbarColor:"white"
			},
			navBackgroundColor: {
				type: String,
				default: navigationBarOptions && navigationBarOptions.navigationBarBackgroundColor ? navigationBarOptions.navigationBarBackgroundColor:"white"
			},
			float: {
				type: Boolean,
				default: navigationBarOptions ? navigationBarOptions.float:false
			},
			shadow: {
				type: Boolean,
				default: navigationBarOptions ? navigationBarOptions.shadow:false
			},
			borderBottomColor: {
				type: String,
				default: navigationBarOptions ? navigationBarOptions.borderBottomColor:"transparent"
			}
		},
		computed: {
			navBarStyle: function() {
				return {
					"--status-bar-height": this.statusBarHeight + "px",
					"--title-bar-height": this.titleBarHeight + 'px',
					"--capsule-menu-width": this.menuWidth + "px",
					"--capsule-menu-height": this.menuHeight + "px",
					"--capsule-menu-horizontal-gap": this.horizontalMenuGap + "px",
					"--capsule-menu-vertical-gap": this.verticalMenuGap + "px",
					"--navigation-bar-text-style": this.textStyle
				}
			},
			titleBarStyle: function() {
				return {
					height: this.titleBarHeight + 'px', 
					minHeight: (this.menuHeight + 2 * this.verticalMenuGap) + 'px',
				}
			},
			leftButtonsStyle: function() {
				return {
					height: this.menuHeight + 'px', 
					marginTop: this.verticalMenuGap + 'px', 
					marginLeft: this.horizontalMenuGap + 'px',
				}
			},
			centerTitleStyle: function() {
				return {
					position: 'absolute',
					height: (this.menuHeight + 2*this.verticalMenuGap) + 'px',
					left: (this.menuWidth + 2*this.horizontalMenuGap) + 'px', 
					right: (this.menuWidth + 2*this.horizontalMenuGap) + 'px', 
					justifyContent: 'center',
					color: this.textStyle === 'white' ? 'white':'black'
				}
			},
			leftTitleStyle: function() {
				return {
					height: (this.menuHeight + 2*this.verticalMenuGap) + 'px', 
					marginLeft: this.horizontalMenuGap + 'px', 
					marginRight: (this.menuWidth + 2*this.horizontalMenuGap) + 'px', 
					justifyContent: 'flex-start',
					color: this.textStyle === 'white' ? 'white':'black'
				}
			},
			leftSingleButtonLightStyle: function() {
				return {
					width: this.menuHeight + 'px', 
					height: this.menuHeight + 'px', 
					border: 'thin solid rgba(255, 255, 255, 0.25)', 
					backgroundColor: 'rgba(0, 0, 0, 0.15)',
					borderRadius: this.menuHeight/2 + 'px'
				}
			},
			leftSingleButtonDarkStyle: function() {
				return {
					width: this.menuHeight + 'px', 
					height: this.menuHeight + 'px', 
					border: 'thin solid rgba(0, 0, 0, 0.1)', 
					backgroundColor: 'rgba(255, 255, 255, 0.6)',
					borderRadius: this.menuHeight/2 + 'px'
				}
			},
			leftDoubleButtonLightStyle: function() {
				return {
					width: this.menuWidth + 'px',
					height: this.menuHeight + 'px', 
					border: 'thin solid rgba(255, 255, 255, 0.25)', 
					backgroundColor: 'rgba(0, 0, 0, 0.15)',
					borderRadius: this.menuHeight/2 + 'px'
				}
			},
			leftDoubleButtonDarkStyle: function() {
				return {
					width: this.menuWidth + 'px', 
					height: this.menuHeight + 'px', 
					border: 'thin solid rgba(0, 0, 0, 0.1)', 
					backgroundColor: 'rgba(255, 255, 255, 0.6)',
					borderRadius: this.menuHeight/2 + 'px'
				}
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navigationBarHeight: 44,
				horizontalMenuGap: 0,
				verticalMenuGap: 0,
				menuWidth: 0,
				menuHeight: 0,
				navigationStyle: "default",
				titleBarHeight: 44
			};
		},
		created: function() {
			this.initNavBarInfo()
		},
		methods: {
			initNavBarInfo: function() {
				// #ifndef APP-PLUS || WEB 
				let { left, top, right, bottom, width, height } = uni.getMenuButtonBoundingClientRect()
				let { statusBarHeight, screenWidth, screenHeight, windowHeight } = uni.getSystemInfoSync()
				let horizontalMenuGap = screenWidth - right
				let verticalMenuGap = top - statusBarHeight
				let screenTop = screenHeight - windowHeight
				
				if (screenTop > 0) {
					this.navigationStyle = "default"
				} else {
					this.navigationStyle = "custom"
				}
				
				this.statusBarHeight = statusBarHeight
				this.horizontalMenuGap = horizontalMenuGap
				this.verticalMenuGap = verticalMenuGap
				this.menuWidth = width
				this.menuHeight = height
				this.titleBarHeight = Math.max(44, 2*(top - statusBarHeight) + height)
				console.log("initNavBarInfo", JSON.stringify({
					screenTop: screenTop,
					statusBarHeight: this.statusBarHeight,
					horizontalMenuGap: this.horizontalMenuGap,
					verticalMenuGap: this.verticalMenuGap,
					menuWidth: this.menuWidth,
					menuHeight: this.menuHeight,
					titleBarHeight: this.titleBarHeight
				}))
				// #endif
				
				// #ifdef WEB
				this.statusBarHeight = 0
				this.horizontalMenuGap = 7
				this.verticalMenuGap = 6
				this.menuWidth = 87
				this.menuHeight = 32
				this.titleBarHeight = 44
				this.navigationStyle = "custom"
				// #endif
				
				// #ifdef APP-PLUS
				let { statusBarHeight } = uni.getSystemInfoSync()
				
				this.statusBarHeight = statusBarHeight
				this.horizontalMenuGap = 7
				this.verticalMenuGap = 6
				this.menuWidth = 87
				this.menuHeight = 32
				this.titleBarHeight = 44
				this.navigationStyle = "custom"
				// #endif
			},
			
			onMenuButtonTap: function(index, event) {
				let clickButton = this.leftButtons[index]
				clickButton.action();
			}
		}
	}
</script>

<style scoped>
	.nav-bar-content {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 9999;
	}
	.status-bar,
	.title-bar {
		width: 100%;
	}

	.title-bar {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.page-title {
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
	}

	.left-buttons {
		flex-shrink: 0;
	}
	
	.left-button {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	
	.left-button.h5 {
		border: none !important;
	}
	
	.menu-button {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.menu-icon {
		width: 100%;
		height: 60%;
	}
	
	.line {
		height: 60%;
	}
	
	.nav-bar-shadow {
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
	}
</style>
